<template>
  <span ref="count"></span>
</template>

<script setup name="CountUpVue">
import { CountUp } from 'countup.js'
const { proxy } = getCurrentInstance()

const props = defineProps({
  startVal: {
    type: Number,
    default: 0
  },
  endVal: {
    type: Number,
    default: 0
  },
  decimals: {
    type: Number,
    default: 0
  },
  // 单位s
  duration: {
    type: Number,
    default: 2
  },
  useEasing: {
    type: Boolean,
    default: true
  },
  useGrouping: {
    type: Boolean,
    default: true
  },
  separator: {
    type: String,
    default: ','
  },
  decimal: {
    type: String,
    default: '.'
  },
  prefix: {
    type: String,
    default: ''
  },
  suffix: {
    type: String,
    default: ''
  }
})

function init() {
  const countUp = new CountUp(proxy.$refs.count, props.endVal, {
    startVal: props.startVal,
    duration: props.duration,
    decimals: props.decimals,
    useEasing: props.useEasing,
    useGrouping: props.useGrouping,
    separator: props.separator,
    decimal: props.decimal,
    prefix: props.prefix,
    suffix: props.suffix
  })
  countUp.start()
}

onMounted(() => {
  init()
})

watch(props, (newVal, oldVal) => {
  init()
})
</script>

<style lang="scss" scoped></style>
